<template>
  <div>
    <!-- 顶部滑动菜单 -->
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            :class="['mui-control-item', item == '全部' ? 'mui-active' : '']"
            v-for="(item, i) in cateList "
            :key="i"
          >{{ item }}</a>
        </div>
      </div>
      <!-- <h3>图片新闻</h3> -->
    </div>
    <!-- 图片列表 -->
    <ul class="photo">
      <router-link v-for="(item, i) in picList" :key="i" :to="'/home/photoInfo/'+ i" tag="li">
        <img v-lazy="item.thumbnail_pic_s">
        <div class="info_box">
          <h1 class="author">{{ item.author_name}}{{item.date}}</h1>
          <p class="info">{{item.title}}</p>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
import mui from '../../lib/mui/js/mui.min.js'


export default {
  data() {
    return {
      categories: [
        { id: 0, name: '全部' },
        { id: 1, name: '热点新闻' },
        { id: 2, name: '新闻新闻' },
        { id: 3, name: '娱乐新闻' },
        { id: 4, name: '社会新闻' },
        { id: 5, name: '军事新闻' },
        { id: 6, name: '电竞新闻' }
      ],
      picList: [],
      cateList: []
    }
  },
  mounted() {
    // 如果要操作元素，最好在 mounted 中，因为此时的元素是最新的
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005
    })
  },
  created() {
    this.getPic()
  },
  methods: {
    getPic() {
      this.$http.get('../../data_file/old.json')
        .then(data => {
          var data = data.body
          console.log(data);

          if (data.error_code !== 0) {
            Toast({
              message: '加载新闻列表失败，请刷新重试···',
            })
          }
          this.picList = data.result.data
          console.log(this.picList);
          var cateArr = []
          for (var i = 0; i < this.picList.length; i++) {
            cateArr.push(this.picList[i].category)
          }
          // 数组去重
          function unique(a) {
            var res = a.filter(function (item, index, array) {
              return array.indexOf(item) === index;
            });
            return res;
          }
          this.cateList = unique(cateArr)
          this.cateList.unshift('全部')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  touch-action: pan-y;
}
.photo {
  margin: 0;
  padding: 10px;
  li {
    background-color: #ccc;
    text-align: center;
    list-style: none;
    margin-bottom: 10px;
    box-shadow: 0 0 10px #999;
    position: relative;
    width: 100%;
    img {
      width: 100%;
      vertical-align: middle;
    }
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
    .info_box {
      text-align: left;
      width: 100%;
      position: absolute;
      bottom: 0;
      padding: 0 5px;
      font-size: 12px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.4);
      h1 {
        font-size: 14px;
      }
      .info {
        color: #fff;
      }
    }
  }
}
</style>